<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/app/admin/component/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" media="all">
    <style>
    .layui-card {margin-bottom: 15px; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);}
    .layui-card-header {font-weight: bold; height: 42px; line-height: 42px; color: #333;}
    .count-box {padding: 20px; text-align: center; position: relative;}
    .count-box .count-number {font-size: 30px; font-weight: bold; margin: 10px 0; color: #009688;}
    .count-box .count-text {color: #666; font-size: 16px;}
    .count-box .sub-count {font-size: 13px; margin: 10px 0; color: #666;}
    .count-box .sub-count span {margin: 0 5px; display: inline-block;}
    .count-box .sub-count span b {color: #009688; margin: 0 3px;}
    .stock-warning .count-number {color: #FF5722;}
    .stock-warning .sub-count span b {color: #FF5722;}
    .top-sales .count-number {color: #FFB800;}
    .top-sales .sub-count {text-align: left; padding-left: 20px;}
    .top-sales .sub-count div {margin: 5px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .top-sales .sub-count div span {color: #FFB800;}
    .search-form {background-color: #fff; padding: 15px 15px 5px;}
    .tool-btn-group {padding: 10px 15px; background-color: #fff;}
    .tool-btn-group .layui-btn {margin-bottom: 5px;}
    </style>
</head>
<body class="pear-container">
    <!-- 统计信息 -->
    <!-- <div class="layui-row layui-col-space15">
       
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-body count-box">
                    <div class="count-text">商品总量</div>
                    <div class="count-number" id="total-goods">0</div>
                    <div class="sub-count">
                        <span>普通商品 <b id="normal-goods">0</b> 件</span>
                        <span>服务商品 <b id="service-goods">0</b> 件</span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-body count-box stock-warning">
                    <div class="count-text">库存预警</div>
                    <div class="count-number" id="stock-warning">0</div>
                    <div class="sub-count">
                        <span>库存不足5 <b id="stock-lt-5">0</b> 件</span>
                        <span>库存不足10 <b id="stock-lt-10">0</b> 件</span>
                        <span>库存不足15 <b id="stock-lt-15">0</b> 件</span>
                    </div>
                </div>
            </div>
        </div>
      
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-body count-box top-sales">
                    <div class="count-text">销售排行</div>
                    <div class="count-number">Top3</div>
                    <div class="sub-count" id="top-sales">
                        
                    </div>
                </div>
            </div>
        </div>
    </div> -->

    <div class="layui-card">
        <!-- 搜索栏 -->
        <div class="search-form">
            <form class="layui-form" lay-filter="search-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">商品搜索</label>
                        <div class="layui-input-inline">
                            <input type="text" name="keyword" placeholder="商品编号/名称/条码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">商品分类</label>
                        <div class="layui-input-inline">
                            <select name="category_id" lay-filter="category_id">
                                <option value="">全部分类</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">商品类型</label>
                        <div class="layui-input-inline">
                            <select name="type" lay-filter="type">
                                <option value="">全部类型</option>
                                <option value="1">普通商品</option>
                                <option value="2">服务商品</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">商品状态</label>
                        <div class="layui-input-inline">
                            <select name="status" lay-filter="status">
                                <option value="">全部状态</option>
                                <option value="1">上架</option>
                                <option value="0">下架</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit lay-filter="goods-search">
                            <i class="layui-icon layui-icon-search"></i> 搜索
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">
                            <i class="layui-icon layui-icon-refresh"></i> 重置
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 工具栏 -->
        <div class="tool-btn-group">
            <div class="layui-btn-group">
                <button class="layui-btn layui-btn-normal" data-type="add">
                    <i class="layui-icon layui-icon-add-1"></i> 添加商品
                </button>
<!--                <button class="layui-btn layui-btn-normal" data-type="category">-->
<!--                    <i class="layui-icon layui-icon-template"></i> 分类管理-->
<!--                </button>-->
                <button class="layui-btn layui-btn-danger" data-type="batchDel">
                    <i class="layui-icon layui-icon-delete"></i> 批量删除
                </button>
<!--                <button class="layui-btn" data-type="import">-->
<!--                    <i class="layui-icon layui-icon-upload-drag"></i> 导入商品-->
<!--                </button>-->
<!--                <button class="layui-btn" data-type="export">-->
<!--                    <i class="layui-icon layui-icon-download-circle"></i> 导出商品-->
<!--                </button>-->
            </div>
        </div>

        <!-- 数据表格 -->
        <div class="layui-card-body">
            <table id="LAY-goods-list" lay-filter="LAY-goods-list"></table>
        </div>
    </div>

    <!-- 表格工具栏模板 -->
    <script type="text/html" id="table-goods-operation">
        <div class="layui-btn-group">
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
                <i class="layui-icon layui-icon-edit"></i>编辑
            </a>
            {{# if(d.status == 1){ }}
            <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="status">
                <i class="layui-icon layui-icon-down"></i>下架
            </a>
            {{# } else { }}
            <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="status">
                <i class="layui-icon layui-icon-up"></i>上架
            </a>
            {{# } }}
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
                <i class="layui-icon layui-icon-delete"></i>删除
            </a>
        </div>
    </script>

    <!-- 表格状态列模板 -->
    <script type="text/html" id="table-goods-status">
        <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="上架|下架" lay-filter="goods-status" {{ d.status == 1 ? 'checked' : '' }}>
    </script>

    <!-- 表格库存列模板 -->
    <script type="text/html" id="table-goods-stock">
        {{# if(d.stock <= d.min_stock){ }}
        <span class="layui-badge layui-bg-red">{{d.stock}}</span>
        {{# } else { }}
        <span>{{d.stock}}</span>
        {{# } }}
    </script>

    <!-- 表格类型列模板 -->
    <script type="text/html" id="table-goods-type">
        {{# if(d.type == 1){ }}
        <span class="layui-badge layui-bg-blue">普通</span>
        {{# } else { }}
        <span class="layui-badge layui-bg-orange">服务</span>
        {{# } }}
    </script>

    <script src="/app/admin/component/layui/layui.js"></script>
    <script src="/app/admin/component/pear/pear.js"></script>
    <script>
    layui.use(['table', 'form', 'jquery', 'popup'], function(){
        var $ = layui.$
        ,table = layui.table
        ,form = layui.form
        ,popup = layui.popup;

        // 加载统计数据
        function loadStats() {
            $.ajax({
                url: '/app/ky_shouyin/admin/goods/stats',
                type: 'get',
                success: function(res) {
                    if (res.code === 0) {
                        var data = res.data;
                        $('#total-goods').text(data.total);
                        $('#normal-goods').text(data.normal);
                        $('#service-goods').text(data.service);
                        $('#stock-warning').text(data.warning);
                        $('#stock-lt-5').text(data.stock_lt_5);
                        $('#stock-lt-10').text(data.stock_lt_10);
                        $('#stock-lt-15').text(data.stock_lt_15);
                        
                        // 加载销售排行
                        var topSales = '';
                        layui.each(data.top_sales, function(index, item) {
                            topSales += '<div>' + (index + 1) + '. ' + item.name + 
                                       ' <span>(' + item.sales_count + ')</span></div>';
                        });
                        if (data.top_sales.length === 0) {
                            topSales = '<div style="text-align:center;color:#999;">暂无销售数据</div>';
                        }
                        $('#top-sales').html(topSales);
                    }
                }
            });
        }
        
        // 加载分类数据
        $.ajax({
            url: '/app/ky_shouyin/admin/goods/category_list',
            type: 'get',
            success: function(res) {
                if (res.code === 0) {
                    var options = '<option value="">全部分类</option>';
                    layui.each(res.data, function(index, item) {
                        if (item.status === 1) {
                            options += '<option value="' + item.id + '">' + 
                                     new Array(item.level + 1).join('├ ') + item.name + '</option>';
                        }
                    });
                    $('select[name="category_id"]').html(options);
                    form.render('select');
                }
            }
        });

        //商品列表
        table.render({
            elem: '#LAY-goods-list'
            ,url: '/app/ky_shouyin/admin/goods/list'
            ,toolbar: true
            ,defaultToolbar: ['filter', 'exports', 'print']
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID', width: 80, sort: true}
                ,{field: 'code', title: '商品编号', width: 120}
                ,{field: 'name', title: '商品名称', width: 200}
                ,{field: 'type', title: '商品类型', width: 100, templet: '#table-goods-type'}
                ,{field: 'category_name', title: '商品分类', width: 120}
                ,{field: 'spec', title: '规格', width: 100}
                ,{field: 'price', title: '零售价', width: 100, align: 'right', templet: function(d){
                    return '￥' + d.price;
                }}
                ,{field: 'member_price', title: '会员价', width: 100, align: 'right', templet: function(d){
                    return '￥' + d.member_price;
                }}
                ,{field: 'original_price', title: '进价', width: 100, align: 'right', templet: function(d){
                    return '￥' + d.original_price;
                }}
                ,{field: 'unit', title: '单位', width: 80}
                ,{field: 'stock', title: '库存', width: 80, templet: '#table-goods-stock', align: 'right'}
                ,{field: 'store_name', title: '门店', width: 120}
                ,{field: 'created_at', title: '创建时间', width: 160}
                ,{field: 'status', title: '状态', width: 100, templet: '#table-goods-status'}
                ,{title: '操作', width: 180, align: 'center', fixed: 'right', toolbar: '#table-goods-operation'}
            ]]
            ,page: true
            ,limit: 15
            ,height: 'full-280'
            ,text: {
                none: '暂无数据'
            }
            ,done: function(){
                // 加载统计数据
                loadStats();
            }
        });

        //监听工具条
        table.on('tool(LAY-goods-list)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确定删除该商品？', function(index){
                    $.ajax({
                        url: '/app/ky_shouyin/admin/goods/delete'
                        ,type: 'post'
                        ,data: {id: data.id}
                        ,success: function(res){
                            if(res.code == 0){
                                popup.success(res.msg);
                                table.reload('LAY-goods-list');
                            }else{
                                popup.error(res.msg);
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.open({
                    type: 2
                    ,title: '编辑商品'
                    ,content: '/app/ky_shouyin/admin/goods/edit?id=' + data.id
                    ,area: ['800px', '600px']
                    ,btn: ['确定', '取消']
                    ,yes: function(index, layero){
                        var iframeWindow = window['layui-layer-iframe'+ index]
                        ,submit = layero.find('iframe').contents().find('#save');
                        
                        //监听提交
                        iframeWindow.layui.form.on('submit(save)', function(data){
                            var field = data.field;
                            field.id = obj.data.id;
                            
                            //提交修改
                            $.ajax({
                                url: '/app/ky_shouyin/admin/goods/edit'
                                ,type: 'post'
                                ,data: field
                                ,success: function(res){
                                    if(res.code == 0){
                                        popup.success(res.msg);
                                        table.reload('LAY-goods-list');
                                        layer.close(index);
                                    }else{
                                        popup.error(res.msg);
                                    }
                                }
                            });
                        });
                        
                        submit.trigger('click');
                    }
                }); 
            } else if(obj.event === 'status'){
                var newStatus = data.status == 1 ? 0 : 1;
                var statusText = newStatus == 1 ? '上架' : '下架';
                
                $.ajax({
                    url: '/app/ky_shouyin/admin/goods/status'
                    ,type: 'post'
                    ,data: {id: data.id, status: newStatus}
                    ,success: function(res){
                        if(res.code == 0){
                            popup.success(res.msg);
                            table.reload('LAY-goods-list');
                        }else{
                            popup.error(res.msg);
                        }
                    }
                });
            }
        });

        //监听状态操作
        form.on('switch(goods-status)', function(obj){
            var id = this.value;
            var status = obj.elem.checked ? 1 : 0;
            
            $.ajax({
                url: '/app/ky_shouyin/admin/goods/status'
                ,type: 'post'
                ,data: {id: id, status: status}
                ,success: function(res){
                    if(res.code == 0){
                        popup.success(res.msg);
                    }else{
                        popup.error(res.msg);
                        $(obj.elem).prop('checked', !obj.elem.checked);
                        form.render('checkbox');
                    }
                }
            });
        });

        //监听搜索
        form.on('submit(goods-search)', function(data){
            var field = data.field;
            
            table.reload('LAY-goods-list', {
                where: field
                ,page: {
                    curr: 1
                }
            });
            
            return false;
        });

        // 工具栏事件处理
        var active = {
            add: function(){
                layer.open({
                    type: 2,
                    title: '添加商品',
                    content: '/app/ky_shouyin/admin/goods/add',
                    area: ['800px', '600px'],
                    maxmin: true
                });
            },
            category: function(){
                layer.open({
                    type: 2,
                    title: '商品分类',
                    content: '/app/ky_shouyin/admin/goods/category',
                    area: ['800px', '600px'],
                    maxmin: true
                });
            },
            batchDel: function(){
                var checkStatus = table.checkStatus('LAY-goods-list');
                var data = checkStatus.data;
                if(data.length === 0){
                    layer.msg('请选择要删除的商品', {icon: 2});
                    return;
                }
                layer.confirm('确定删除选中的商品吗？', function(index){
                    var ids = data.map(function(item){ return item.id; });
                    $.ajax({
                        url: '/app/ky_shouyin/admin/goods/batch_delete',
                        type: 'POST',
                        data: {ids: ids},
                        success: function(res){
                            if(res.code === 0){
                                layer.msg(res.msg, {icon: 1});
                                table.reload('LAY-goods-list');
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }
                    });
                    layer.close(index);
                });
            },
            import: function(){
                layer.open({
                    type: 2,
                    title: '导入商品',
                    content: '/app/ky_shouyin/admin/goods/import',
                    area: ['600px', '400px']
                });
            },
            export: function(){
                var checkStatus = table.checkStatus('LAY-goods-list');
                var data = checkStatus.data;
                var ids = data.map(function(item){ return item.id; }).join(',');
                var url = '/app/ky_shouyin/admin/goods/export' + (ids ? '?ids=' + ids : '');
                window.location.href = url;
            }
        };

        $('.tool-btn-group .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] && active[type].call(this);
        });
    });
    </script>
</body>
</html> 